<script setup>
import { ref } from 'vue'
import { getUserOrder } from '@/api/order'
import { ElMessage } from 'element-plus';


const orderList = ref([
    {
        orederId: '',
        createTime: '',
        ordernum: '',
        remark: '',
        goodId: '',
        orderId: '',
        goodname: '',
        color: '',
        size: '',
        categoryname: '',
        count: '',
        price: '',
        imageUrl: '',
        status: '',
        paytime: '',
        payment: '',
    }
])

const queryParams = ref({
  pageNum: 1,
  pageSize: 3
})
// 获取用户订单
function getUserOrders() {
  getUserOrder(queryParams.value.pageNum, queryParams.value.pageSize).then(res => {
    console.log( res);
    if (res.code === 200) {
   
            
      orderList.value = res.rows;
      pageTotal.value = res.total;
      pagePages.value = Math.ceil(pageTotal.value / pageSize.value); // 计算总页数
    } else {
      ElMessage.error(res.msg)
    }
  })
  .catch((err) => {
    console.log(err);
  })
}
getUserOrders();

//分页
const pageTotal = ref(0);
const pagePages = ref(1);
const currentPage = ref(1);
const pageSize = ref(3);

// 监听页码改变
function handleSizeChange(newSize) {
    pageSize.value = newSize;
    queryParams.value.pageSize = newSize; // 更新查询参数
    // currentPage.value = 1;
    getUserOrders()
    console.log(`每页 ${newSize} 条`)
}
// 监听页码改变
function handleCurrentChange(newPage) {
  if (newPage > 0 && newPage <= pagePages.value) {
    pagePages.value = newPage;
    queryParams.value.pageNum = newPage; // 更新查询参数
    getUserOrders()
    console.log(`当前页: ${newPage}`)
  }
}

</script>

<template>
    <div class="orderData">
        <!-- 订单列表数据 -->
        <el-table :data="orderList" style="width: 100%" border stripe @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55"></el-table-column>
            <!-- <el-table-column prop="movieId" label="#" width="40"></el-table-column> -->
            <el-table-column prop="goodname" label="商品名称"></el-table-column>
            <el-table-column prop="imageUrl" label="商品图片"></el-table-column>
            <el-table-column prop="categoryname" label="商品类型"></el-table-column>
            <el-table-column prop="count" label="数量"></el-table-column>
            <el-table-column prop="price" label="价格"></el-table-column>
            <el-table-column prop="status" label="状态"></el-table-column>
            <el-table-column prop="createTime" label="收银时间"></el-table-column>
            <!--      操作按钮-->
            <el-table-column label="操作" fixed="right">
                <template #default="{ row }">
                    <el-button type="danger" @click="isAbleDelete(row.orderid)">删除订单
                    </el-button>
                </template>
            </el-table-column>
            
        </el-table>
        <!--分页区域-->
        <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :page-sizes="[3]"
            :small="small"
            :disabled="disabled"
            :background="background"
            layout="sizes,prev, pager, next, jumper"
            :total="pageTotal"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            style="position: relative ;bottom: 30px; margin-top: 30px; margin-left: 40%;"
        />
    </div>
</template>


<style scoped>
.orderData {
    margin: 0px 30px;
    padding: 30px 0px;
    height: calc(100vh);
}

</style>
